<template>
    <div>
        <mt-header class="m_mint_header" fixed title="身份认证">
            <router-link to="/" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="h50"></div>
        <div class="img_approve_list">
            <div>
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        accept="image/png,image/jpeg,image/jpg"
                        :on-success="handleAvatarSuccessFrontImg"
                        :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imgForm.frontImg" :src="imgForm.frontImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <div class="img_approve_info">
                    身份证正面照
                </div>
            </div>
            <div>
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        accept="image/png,image/jpeg,image/jpg"
                        :on-success="handleAvatarSuccessBackImg"
                        :before-upload="beforeAvatarUpload"
                >
                    <img v-if="imgForm.backImg" :src="imgForm.backImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <div class="img_approve_info">
                    身份证背面照
                </div>
            </div>
            <div>
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        accept="image/png,image/jpeg,image/jpg"
                        :on-success="handleAvatarSuccessHoldImg"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imgForm.holdImg" :src="imgForm.holdImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="img_approve_info">
                    手持身份证照
                </div>
            </div>
        </div>
        <div class="img_approve_btn">
            <mt-button size="large" type="primary" @click.native="submitUpload">上传</mt-button>
        </div>

    </div>
</template>

<script>

    import axios from "axios"

    export default {
        name: "Approve",
        components: {},
        data() {
            return {
                imgForm: {
                    frontImg: '',
                    backImg: '',
                    holdImg: '',
                },
                imageUrl: '',
                fileList: [],
                frontFile: null,
                backFile: null,
                holdFile: null,

            }
        },
        methods: {

            handleAvatarSuccessFrontImg(res, file) {
                // this.getBase64(file.raw).then(response => {
                //     console.log('base64 == ',response)
                // });
                this.frontFile = file.raw;
                this.imgForm.frontImg = URL.createObjectURL(file.raw);

            },
            handleAvatarSuccessBackImg(res, file) {
                // this.getBase64(file.raw).then(response => {
                //     console.log('base64 == ',response)
                // });
                this.backFile = file.raw;
                this.imgForm.backImg = URL.createObjectURL(file.raw);
            },
            handleAvatarSuccessHoldImg(res, file) {
                // this.getBase64(file.raw).then(response => {
                //     console.log('base64 == ',response)
                // });
                this.holdFile = file.raw;
                this.imgForm.holdImg = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                let isJPG = file.type === 'image/jpeg' || 'image/png' || 'image/jpg';
                let isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传图片只能是 JPG 格式!');
                    return false;
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!');
                    return false;
                }
            },
            // getBase64(file) {
            //     return new Promise( (resolve, reject) => {
            //         let reader = new FileReader();
            //         let imgResult = "";
            //         reader.readAsDataURL(file);
            //         reader.onload = function () {
            //             imgResult = reader.result;
            //         };
            //         reader.onerror = function (error) {
            //             reject(error);
            //         };
            //         reader.onloadend = function () {
            //             resolve(imgResult);
            //         };
            //     });
            // },
            submitUpload() {
                console.log(this.imgForm)
                if(this.imgForm.frontImg == '' || this.imgForm.backImg == '' || this.imgForm.holdImg == ''){
                    this.$toast({message:'请选择上传照片',duration:1000})
                    return false;
                }
                this.uploadFront();
            },
            uploadFront() {
                let formData = new FormData();
                formData.append('type', '2');
                formData.append('file', this.frontFile);
                this.requestAxios.requestWebFile('post', '/api/upload_img.do', formData, (response) => {
                    // console.log(111, response);
                    this.imgForm.frontImg = response.data;
                    this.uploadBack();
                })
            },
            uploadBack() {
                let formData = new FormData();
                formData.append('type', '3');
                formData.append('file', this.backFile);
                this.requestAxios.requestWebFile('post', '/api/upload_img.do', formData, (response) => {
                    // console.log(222, response);
                    this.imgForm.backImg = response.data;
                    this.uploadHold();
                })
            },
            uploadHold() {
                let formData = new FormData();
                formData.append('type', '4');
                formData.append('file', this.holdFile);
                this.requestAxios.requestWebFile('post', '/api/upload_img.do', formData, (response) => {
                    // console.log(333, response);
                    this.imgForm.holdImg = response.data;
                    this.$toast({message:"身份证已上传完毕，我们会第一时间进行审核，请稍后关注",duration:3000})
                })
            }
        }
    }
</script>

<style>

    .img_approve_list {
        padding: .3rem;
    }

    .img_approve_list > div {
        display: flex;
        align-items: center;
        margin-bottom: .3rem;
    }

    .img_approve_info {
        padding-left: .3rem;
    }

    .img_approve_btn {
        padding: .3rem;
        margin-top: 1rem;
    }

    .img_approve_btn .mint-button {
        height: .7rem;
        background: linear-gradient(#f0973d, #cd5305);
        color: #fff;
        font-size: .3rem;
        box-shadow: 0 0 10px #dbbaa5;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #ed8413;
    }

    .avatar-uploader-icon {
        font-size: .55rem;
        color: #8c939d;
        width: 3.5rem;
        height: 2.2rem;
        line-height: 2.2rem !important;
        text-align: center;
    }

    .avatar {
        width: 3.5rem;
        height: 2.2rem;
        display: block;
    }


</style>
